<template>
  <div class="app-container">
    <apj-searchable
      ref="searchable"
      :name="componentName"
      :show-advance="false"
      @search="handleSearch"
    />
    <div class="interval-div" />
    <el-card>
      <template v-slot:header>
        <span>{{ $t('route.base.company.info') }}</span>
        <span style="float: right;">
          <apj-permission-table-action 
            @add="handleAdd"
            @import="handleImportClick"
            @export="handleExportClick"
            @batchdelete="handleBatchdelete"
            @hidecolumn="handleHidecolumnShow"
          />
          <el-button @click="handleAdd">新增</el-button>
        </span>
      </template>
      <el-table
        ref="table"
        :data="items"
        row-key="id"
        stripe
        highlight-current-row
        @selection-change="handleSelection"
      >
        <el-table-column
          type="selection"
          width="30px"
        />
<el-table-column
          prop="name"
          :label="$t('base.company.info.name')"
          show-overflow-tooltip
        >
        </el-table-column>
<el-table-column
          prop="aliseName"
          :label="$t('base.company.info.alise_name')"
          show-overflow-tooltip
        >
        </el-table-column>
<el-table-column
          prop="companyUrl"
          :label="$t('base.company.info.company_url')"
          show-overflow-tooltip
        >
        </el-table-column>
<el-table-column
          prop="remark"
          :label="$t('base.company.info.remark')"
          show-overflow-tooltip
        >
        </el-table-column>
<el-table-column
          prop="img"
          :label="$t('base.company.info.img')"
          show-overflow-tooltip
        >
        </el-table-column>
<el-table-column
          align="center"
          :label="$t('common.option.action')"
          prop="action"
          fixed="right"
        >
          <template slot-scope="{row}">
            <apj-permission-table-action 
              @edit="handleEdit(row)"
              @delete="handleDelete(row)"
              @detail="handleDetail(row)"
            />
            <el-button
                type="text"
                size="small" @click="handleEdit(row)">修改</el-button>
            <el-button
                type="text"
                size="small" @click="handleDelete(row)">删除</el-button>
            <el-button
                type="text"
                size="small" @click="handleDetail(row)">详情</el-button>

          </template>
        </el-table-column>
      </el-table>
      <div class="interval-div" />
      <apj-pagination
        :total="total"
        @handleChange="handlePageChange"
      />
      <apj-table-hidecolumn ref="hidecolumn" />
      <apj-table-export
        ref="export"
        @confirm="handleExport"
      />
      <apj-table-import
        ref="import"
        :filename="$t('route.base.company.info')"
        :template="template"
        :confirm="handleImport"
      />
    </el-card>
  </div>
</template>

<script>
// import{ forkJoin } from 'rxjs'
// import* as InfoApi from '@/api/base/company/info'
// import* as DeleteApi from '@/api/delete'
// import{ formatDate } from '@/filters/time'
// import{ nullToEmpty } from '@/filters'
 import axios from 'axios'
export default {
  name: 'BaseCompanyInfo',
  components: {},
  directives: {},
  filters: {
  },
  data() {
    return {
      componentName: this.$options.name,
      items: [],
      total: 0,
      query: { page: {}, sort: { prop: '', order: '' }},
      selection: []
    }
  },
  created() {
    this.initPage()
  },
  mounted() {
    this.$refs.export.init(this.$refs.table)
    this.$refs.hidecolumn.init(this.$refs.table, this.componentName)
  },
  methods: {
    initPage() {
      // 初始化页面
       const actionUrl = this.HOST + '/base/company/info/'+ 'initPage'
            axios({
              url: actionUrl,
              method: 'post',
              params: { id: this.entityId }
            }).then(response => {
     // InfoApi.initPage({}).then(response => {
        this.loadGrid()
      })
    },
    loadGrid() {
      // 加载表格数据
      const query = Object.assign({}, this.query)
      const actionUrl = this.HOST + '/base/company/info/'+ 'list'
                  axios({
                    url: actionUrl,
                    method: 'post',
                    params: { id: this.entityId }
                  }).then(response => {
      //InfoApi.loadGrid(query).then(response => {
        const data = response.data
        this.items = data.items
        this.total = data.total
      })
    },
    handleSearch(search) {
      this.query.page = {}
      this.query.conditions = search.conditions
      this.loadGrid()
    },
    handlePageChange(page) {
      // 分页回调
      this.query.page = page
      this.loadGrid()
    },
    toEditPage(id) {
      this.$router.push({
        name: 'BaseCompanyInfoEditLink',
        query: { id: id }
      })
    },
    handleAdd() {
      this.toEditPage()
    },
    handleEdit(row) {
      this.toEditPage(row.id)
    },
    handleDetail(row) {
      this.$router.push({ name: 'BaseCompanyInfoDetailLink', query: { id: row.id }})
    },
    handleHidecolumnShow() {
      this.$refs.hidecolumn.show()
    },
    handleDelete(row) {
     const actionUrl = this.HOST + '/base/company/info/'+ 'delete'
                axios({
                  url: actionUrl,
                  method: 'post',
                  params: { id: row.id }
                }).then(response => {
     // DeleteApi.action({ name: this.componentName, ids: [row.id] }).then(() => {
        this.loadGrid()
       })
    },
    handleBatchdelete() {
      if (this.selection.length > 0) {
        const ids = this.selection.map(row => row.id)
       // DeleteApi.action({ name: this.componentName, ids: ids }).then(() => {
       //   this.loadGrid()
      //  })
      }
    },
    handleSelection(rows) {
      this.selection = rows
    },
    handleExport(data) {
      const { headers, propertys } = data
      const timename = formatDate(new Date())

      const query = Object.assign({}, this.query)
      query.page = { size: 10000, current: 1 }

    },
    handleExportClick() {
      this.$refs.export.show()
    },
    handleImportClick() {
      this.$refs.import.show()
    },
    handleImport(datas) {
      datas.forEach((row) => {
        // 增加、转换属性值
        // row.carnumprefix = ''
      })
}
  }
}
</script>
